<template>
  <div>
    <div class="contract-info" id="contract_info">
      <div class="btn-signature" id="btnSign">点我签名</div>
    </div>
    <!--弹窗-->
    <div class="popup-signature aui-hide" id="popup">
      <div class="popup-content display-flex">
        <div class="writing-area" id="qianmingquyu">
          <div class="area-title">请在下方区域签名</div>
          <div class="signature-area" id="signatureArea"></div>
          <div class="qrqm" id="qrqm">
            <span>确认签名</span>
          </div>
          <div class="cxqm" id="cxqm">
            <span>重写签名</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "../assets/static/js/flashcanvas.js";
import "../assets/static/js/jquery-2.1.4";
import "../assets/static/js/jSignature.min.js";
import Vue from "vue";
var isSign = false; // 用户是否签字过：false未签字，true签字过
/* eslint-disable */
$(function() {
  var click = true;
  const src = "";
  // 获取书写区域宽高
  var writingAreaW = $(".signature-area").width();
  var writingAreaH = $(".signature-area").height();
  // 重定义书写区域范围
  $("#signatureArea").jSignature();
  $(".jSignature").attr("width", writingAreaW);
  $(".jSignature").attr("height", writingAreaH);
  $(".jSignature").css({
    width: writingAreaW + "px",
    height: writingAreaH + "px",
    "background-color": "#ddd"
  });
  // 打开签名弹窗
  $("#btnSign").click(function() {
    $("#popup").removeClass("aui-hide");
    if (click) {
      $("#signatureArea").jSignature("reset");
      // 重新获取书写区域宽高
      writingAreaW = $(".signature-area").width();
      writingAreaH = $(".signature-area").height();
      // 重新重定义书写区域范围
      $(".jSignature").attr("width", writingAreaW);
      $(".jSignature").attr("height", writingAreaH);
      $(".jSignature").css({
        width: writingAreaW + "px",
        height: writingAreaH + "px",
        "background-color": "#ddd"
      });
    }
    click = false;
  });
  // 关闭弹窗
  $("body").on("click", "#popup", function() {
    $("#popup").addClass("aui-hide");
  });
  // 阻止冒泡
  $("#popup").on("click", "#qianmingquyu", function(event) {
    event.stopPropagation();
  });
  // 确认签名
  $("#qrqm").click(function() {
    if (isSign == false) {
      jSignatureTest();
    } else {
      alert("请勿重复签字");
    }
    $("#popup").addClass("aui-hide");
  });
  //重写签名
  $("#cxqm").click(function() {
    //重置画布
    $("#signatureArea").jSignature("reset");
    // 重新获取书写区域宽高
    writingAreaW = $(".signature-area").width();
    writingAreaH = $(".signature-area").height();
    // 重新重定义书写区域范围
    $(".jSignature").attr("width", writingAreaW);
    $(".jSignature").attr("height", writingAreaH);
    $(".jSignature").css({
      width: writingAreaW + "px",
      height: writingAreaH + "px",
      "background-color": "#ddd"
    });
  });
});

// 输出签名
function jSignatureTest(_type) {
  var datapair = $("#signatureArea").jSignature("getData", "image"); // 设置输出的格式，具体可以参考官方文档
  var src = "data:" + datapair[0] + "," + datapair[1];

  var areYouQianM = confirm("是否提交此签名");

  if (areYouQianM) {
    isSign = true; // 阻止重复签字参数
    Vue.prototype.sign_url = src;
  } else {
    // 用于清空签名数据
    window.location.reload();
  }
}
/* eslint-disable */
export default {
  data() {
    return {
      url: ""
    };
  }
};
</script>
<style scoped>
@import "../assets/static/css/common.css";
html,
body {
  height: 100%;
  width: 100%;
  background-color: #fff;
}

/*富文本样式修改*/
.contract-content p span > span {
  color: rgba(80, 80, 80, 1);
  font-size: 0.7rem;
  line-height: 2rem;
}

/*==================*/

/*弹窗*/
.popup-signature {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

.popup-content {
  height: 100%;
  width: 100%;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.writing-area {
  position: relative;
  padding: 0 0.5rem 0.5rem 0.5rem;
  width: 80%;
  height: 40%;
  background-color: #fff;
}

.area-title {
  color: rgba(80, 80, 80, 1);
  font-size: 0.6rem;
  line-height: 2rem;
}

.signature-area {
  position: absolute;
  top: 2rem;
  right: 0.5rem;
  bottom: 2rem;
  left: 0.5rem;
}

.qrqm {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 0.5rem 0 0.5rem;
  color: rgba(80, 80, 80, 1);
  font-size: 0.6rem;
  line-height: 2rem;
}

.qrqm > span {
  display: inline;
  color: #fff;
  background-color: #199fff;
  padding: 0.2rem;
  border-radius: 0.15rem;
}

.cxqm {
  position: absolute;
  bottom: 0;
  display: block;
  left: 0;
  padding: 0 0.5rem 0 0.5rem;
  margin-left: 3.5rem;
  color: rgba(80, 80, 80, 1);
  font-size: 0.6rem;
  line-height: 2rem;
}

.cxqm > span {
  display: inline;
  color: #fff;
  background-color: #199fff;
  padding: 0.2rem;
  border-radius: 0.15rem;
}

/*签字区*/
.signature-content {
  padding: 0.65rem 0.5rem;
  background-color: #fff;
}

.signature-item {
  width: 50%;
  color: rgba(80, 80, 80, 1);
  font-size: 0.7rem;
  line-height: 2rem;
}

.signature-box > span:last-child {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.btn-signature {
  width: 100%;
  line-height: 2.4rem;
  bottom: 0;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(36, 180, 255, 1);
  font-size: 0.75rem;
  text-align: center;
}

.btn-signature:active {
  opacity: 0.6;
}

.aui-hide {
  display: none !important;
}
</style>

